@extends('layouts.app')
@section('title','查看分期付款')

@section('content')
<div class="row">
    <div class="col-lg-10 col-lg-offset-1">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                <h4>分期付款详情</h4>
            </div>
            <div class="panel-body">
                <div class="installment-top">
                    <div class="installment-info">
                        <div class="line">
                            <div class="line-label">商品订单:</div>
                            <div class="line-value">
                                 <a target="_blank" href="{{ route('orders.show', ['order' => $installment->order_id]) }}">查看</a>
                            </div>
                        </div>
                        <div class="line">
                            <div class="line-label">分期金额:</div>
                            <div class="line-value">
                                ￥{{ $installment->total_amount }}
                            </div>
                        </div>
                        <div class="line">
                            <div class="line-label">分期期限:</div>
                            <div class="line-value">
                                {{ $installment->count }}期
                            </div>
                        </div>
                        <div class="line">
                            <div class="line-label">分期费率:</div>
                            <div class="line-value">{{ $installment->fee_rate }}%</div>
                        </div>
                        <div class="line">
                            <div class="line-label">逾期费率:</div>
                            <div class="line-value">{{ $installment->fine_rate }}%</div>
                        </div>
                        <div class="line">
                            <div class="line-label">当前状态:</div>
                            <div class="line-value">{{ \App\Models\Installment::$statusMap[$installment->status] }}</div>
                        </div>
                    </div>
                    <div class="installment-next text-right">
                        {{-- 如果已经没有未还款的还款计划，说明已经结清 --}}
                        @if(is_null($nextItem))
                            <div class="installment-clear text-center">此订单已结清</div>
                        @else
                            <div>
                                <span>近期待还:</span>
                                <div class="value total-amount">￥{{ $nextItem->total }}</div>
                            </div>
                            <div>
                                <span>截止日期:</span>
                                <div class="value">{{ $nextItem->due_date->format('Y-m-d') }}</div>
                            </div>
                            <div class="payment-buttons">
                                <a class="btn btn-primary btn-sm" href="{{ route('installments.alipay',['installment' => $installment->id ]) }}">支付宝支付</a>
                                <button class="btn btn-sm btn-success" id="btn-wechat">微信支付</button>
                            </div>
                        @endif
                    </div>
                </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th>期数</th>
                        <th>还款截止日期</th>
                        <th>状态</th>
                        <th>本金</th>
                        <th>手续费</th>
                        <th>逾期费</th>
                        <th class="text-right">小计</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($items as $item)
                    <tr>
                        <td>
                            {{ $item->sequence + 1 }} / {{ $installment->count }} 期
                        </td>
                        <td>{{ $item->due_date->format('Y-m-d') }}</td>
                        <td>
                            {{-- 如果未还款 --}}
                            @if(is_null($item->paid_at))
                                {{-- 这里使用了我们之前在模型里定义的访问器 --}}
                                @if($item->is_overdue)
                                    <span class="overdue">已逾期</span>
                                @else
                                    <span class="needs-repay">待还款</span>
                                @endif
                            @else
                                <span class="repaid">已还款</span>
                            @endif
                        </td>
                        <td>￥{{ $item->base }}</td>
                        <td>￥{{ $item->fee }}</td>
                        <td>
                            {{ is_null($item->fine) ? '无' : ('￥'.$item->fine) }}
                        </td>
                        <td class="text-right">￥ {{ $item->total }}</td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@stop

@section('scriptsAfterJs')
<script type="text/javascript">
    $(document).ready(function() {
        $('#btn-wechat').click(function() {
            swal({
                 content: $('<img src="{{ route('installments.wechat', ['installment' => $installment->id]) }}" />')[0],
                "buttons": ['关闭','已完成付款']
            })
            .then(function(result) {
                // 如果用户点击了 已完成付款 按钮，则重新加载页面
                if(result) {
                    location.reload();
                }
            });
        });
    });
</script>
@stop